<template>
  <div class="loginWra">
    <div class="loginCenter">
      <div class="loginInfo">
        <div class="topLogo">
          <span class="item-one"><img src="./assets/img/logo.png" alt=""></span>
          <span class="item-two">康远CMS后台管理系统</span>
        </div>
        <div class="inputText">
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm2" class="demo-ruleForm">
            <el-form-item prop="userName">
              <el-input v-model="ruleForm.userName" @keyup.13.native="submitForm('ruleForm2')">
                <template slot="prepend">
                  <img src="./assets/img/user.png" alt="">
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="pwd">
              <el-input type="password" v-model="ruleForm.pwd" autocomplete="off" @keyup.13.native="submitForm('ruleForm2')">
                <template slot="prepend">
                  <img src="./assets/img/pass.png" alt="">
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <img class="loginEd" src="./assets/img/login.png" @click="submitForm('ruleForm2')" alt="">
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import crypto from 'crypto';
export default {
  name:'login',
  data(){
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入用户名!'));
      }else{
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码!'));
      } else {
        callback();
      }
    };
    return {
        loginLoading:'',
        ruleForm: {
          pwd: '',
          userName: ''
        },
        rules: {
          pwd: [
            { validator: validatePass, trigger: 'blur' }
          ],
          userName: [
            { validator: checkAge, trigger: 'blur' }
          ]
        }
      };
  },
  methods:{
      md(str) {
          var md5 = crypto.createHash('md5');
          md5.update(str);
          return md5.digest('hex');
      },
      submitForm(formName) {
        this.loginLoading = this.$loading({
          lock: true,
          text: '登录中，请稍后...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
          customClass:'.load'
        });
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.ruleForm.pwd = this.md(this.ruleForm.pwd);
            this.$http({
                method: 'post',
                url: this.apiUrl.userLoginUrl,
                data:this.ruleForm
            }).then(res => {
                var data = res.data;
                console.log(data);
                if (data.status == 1) {
                    this.set_storage('userName', data.nick);
                    this.set_storage('userId', data.userId);
                    this.set_storage('userType', data.type);
                    this.setCookie('userId',data.userId,1);
                    this.$router.push({path: '/infoFlowData/accountData'});
                    this.loginLoading.close();
                    // switch (data.type){
                    //     case '1':
                    //     case '2':
                    //     case '3':
                    //     case '8':
                    //         this.$router.push({path: '/landpage/pageList'});
                    //         break;
                    //     case '4':
                    //     case '10':
                    //     case '12':
                    //         this.$router.push({path: '/cpaDataMana/realTimeData'});
                    //         break;
                    //     case '5':
                    //         this.$router.push({path: '/areaAD/infoAD'});
                    //         break;
                    //     case '6':
                    //     case '11':
                    //         this.$router.push({path: '/iosDataManage/summaryData'});
                    //         break;
                    //     case '7':
                    //     case '9':
                    //         this.$router.push({path: '/infoDataMana/accountData'});
                    //         break;
                    // }
                } else {
                    this.$message({
                        type: 'error',
                        message: '用户名或密码错误'
                    });
                    this.loginLoading.close();
                }
            }).catch(error => {
                console.log(error);
            });
          } else {
            this.$message({
                type: 'error',
                message: '请检查用户名和用户名是否有误！'
            });
            this.loginLoading.close();
            return false;
          }
        });
      },
  }
}
</script>
<style>
.loginWra{
  width: 100%;
  height: 100%;
  background: url('./assets/img/loginBg.jpg') no-repeat;
  background-size: cover;
}
.loginWra .loginCenter{
  width: 100%;
  height: 368px;
  background: rgba(0, 0, 0, .7);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -ms-transform:translateY(-50%);	/* IE 9 */
  -moz-transform:translateY(-50%); 	/* Firefox */
  -webkit-transform:translateY(-50%); /* Safari 和 Chrome */
  -o-transform:translateY(-50%);
}
.loginWra .loginCenter .loginInfo{
  width: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -ms-transform:translateX(-50%);	/* IE 9 */
  -moz-transform:translateX(-50%); 	/* Firefox */
  -webkit-transform:translateX(-50%); /* Safari 和 Chrome */
  -o-transform:translateX(-50%);
  color: #fff;
  font-size: 64px;
  font-weight: 700;
  padding-top: 65px;
  white-space: nowrap;
  overflow: hidden;
}
.loginWra .loginCenter .loginInfo .topLogo{
  padding-bottom: 50px;
  margin-left: 50%;
  transform: translateX(-50%);
}
.loginWra .loginCenter .loginInfo .inputText{
  margin-left: 50%;
  transform: translateX(-50%);
}
.loginWra .loginCenter .loginInfo .topLogo .item-one img,
.loginWra .loginCenter .loginInfo .topLogo .item-two
{
  vertical-align: middle;
}
.loginWra .el-input{
  width: 370px;
  font-size: 24px;
}
.loginWra .el-form {
  display: -webkit-flex;
  display: flex;
}
.loginWra .el-input__inner{
  line-height: 70px;
  height: 70px;
  margin-left: -1px;
}
.loginWra .el-form-item__content{
  padding-right: 35px;
}
.loginWra .loginEd{
  padding-left: 10px;
}
.loginWra .el-form-item__error{
  font-size: 18px;
  top: 120%;
}
.loginWra .el-form-item{
  margin-bottom: 50px;
}
.loginWra .el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus, .el-message-box__input input.invalid, .el-message-box__input input.invalid:focus{
  border-color: #fff;
}
.loginWra .el-form-item.is-success .el-input__inner, .el-form-item.is-success .el-input__inner:focus, .el-form-item.is-success .el-textarea__inner, .el-form-item.is-success .el-textarea__inner:focus{
  border-color: #fff;
}
.load{
  font-size: 34px;
}
.loginWra .el-loading-text{
  font-size: 18px;
}
</style>

